<template>
  <div @click="toggleClick">
    <div class="hamburger">
      <svg-icon :class-name="isActive ? 'is-active' : ''" icon-class="collapse" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits()
const toggleClick = () => {
  emit('toggleClick');
}
</script>

<style lang="scss" scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  line-height: 26px;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  background-color: #3A4259;
  color: #fff;

  svg {
    display: inline-block;
  }
}

.hamburger .is-active {
  transform: rotate(180deg);
}
</style>
